<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=2.0">

	 <link href='css/header.css' rel='stylesheet'/>
  		<link href='css/row.css' rel='stylesheet'/>
<!--  <link href='css/footer.css' rel='stylesheet'/>-->
	 <link href="css/login.css" rel="stylesheet">
	 <script src="https://cdn.jsdelivr.net/npm/jsqr/dist/jsQR.js"></script>

	 <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
 <!-- ele 的引入放在vue下面-->
 <link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
 <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
 <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
<script src = 'plug-in/jquery-2.2.0.min.js' type='text/javascript'></script>

<!--<script src="/b-user/js/login.js"></script>-->
<script src="/js/index.js"></script>
<!--	 <script src = 'js/global.js' type='text/javascript'></script>-->
<!--	 <script src = 'js/popup.js' type='text/javascript'></script>-->
<!--	 <script src = 'js/carousel.js' type='text/javascript'></script>-->
<!--	 <script src = 'js/pagescroll.js' type='text/javascript'></script>-->
	 <script src = 'js/comment.js' type='text/javascript'></script>
  <title>哔哩哔哩弹幕视频网</title>
	 <script>

	 </script>
</head>
<body>
<div id="app">
	<!--头部区域-->
	<div class='bili-header'>
		<div class='navbar-mask'></div>
		<div class='navbar-wraper'>
			<div class='nav'>
				<ul class='nav-list'>
					<li class='icon-tv'><a href='#'>主站</a></li>
					<li><a href='#' @click.prevent="TODO">动态</a></li>
					<li id='nav-game'>
						<a href='#' @click.prevent="TODO">番剧</a>

					</li>
<!--					<li id='nav-play'>-->
<!--						<a href='#'>直播</a>-->
<!--					</li>-->
					<li>
						<a :href="'product.html?id='+ myinfo.id">会员购</a>
					</li>
<!--					<li class='icon-new' ><a href='#'>BML</a></li>-->
				</ul>
				<bilibili @logined="a"></bilibili>
			</div>
		</div>
		<div class='search-wraper clearfix'>
			<ul>
				<li class='rank'><span class='icon-rank'></span><a href="hotVideo.html">排行榜</a></li>
				<li class='search'>
					<form @submit.prevent="searchByText">
						<input type='text' v-model="searchText" placeholder = '极限公益晚会，没有不可能'>
						<button class='icon-ext' type="submit"></button>
					</form>
				</li>
			</ul>
		</div>
	</div>
	<!--主体区域-->
	<div class='bili-bd' >
		<!--导航区域-->
		<div class='bili-bd-nav'>
			<ul class='nav-menu'>
				<li>
					<a href='index.html'>
						<span class='first ve-num'></span>
						<em>首页</em>
					</a>
				</li>
				<li v-for="b in board">
					<a :href="'index.html?bid='+b.id" >
						<span class='ve-num'>127</span>
						<em>{{b.bname}}</em>
					</a>
				</li>
			</ul>
			<div class='side-bar'>
				<div class='show'>
					<img src ='image/header/phone/1.gif'/>
				</div>
				<div class='phone'>
					<img class='pop' data-config='effect:fadeIn;time:800;' src='image/header/phone/4.png'/>
				</div>
			</div>
		</div>
		<!--轮播区域-->
		<div class='bili-bd-previewer clearfix'>
			<div class='bili-bd-banner carousel' data-config='delay:500;time:4000;'>
				<ul class='banner-container container'>
					<li style='background:url(image/banner/left/4.jpg)'></li>
					<li style='background:url(image/banner/left/5.jpg)'></li>
					<li style='background:url(image/banner/left/2.png)'></li>
					<li style='background:url(image/banner/left/3.jpg)'></li>
					<li style='background:url(image/banner/left/1.jpg)'></li>
				</ul>
				<ul class='banner-tab tab'>
					<li class='active'></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>
			<div class='bili-bd-column carousel' data-config='delay:0;autoplay:false;prev:.prev;next:.next;'>
				<ul class='column-list container'>
					<li>
						<ul class='list-wrap'>
							<li class='top' style='background-image:url(image/banner/right/1/1.jpg)'>
								<a href='#' class='pop' data-config='effect:slideDown;time:250;'>
									<span class='title'>[言和小说]Kill Me Eyes</span>
									<span class='author'>主播:塞亚</span>
								</a>
							</li>
							<li class='top' style='background-image:url(image/banner/right/1/2.jpg)'>
								<a href='#' class='pop' data-config='effect:slideDown;time:250;'>
									<span class='title'>心跳扑通扑通说喜欢</span>
									<span class='author'>主播:高压锅</span>
								</a>
							</li>
							<li class='top' style='background-image:url(image/banner/right/1/3.jpg)'>
								<a href='#' class='pop' data-config='effect:slideDown;time:250;'>
									<span class='title'>见过这样的男人?</span>
									<span class='author'>主播:萌一点嘛</span>
								</a>
							</li>
							<li class='top' style='background-image:url(image/banner/right/1/7.jpg)'>
								<a href='#' class='pop' data-config='effect:slideDown;time:250;'>
									<span class='title'>万国动向</span>
									<span class='author'>主播:萌萌牛</span>
								</a>
							</li>
							<li class='bottom' style='background-image:url(image/banner/right/1/4.jpg)'>
								<a href='#' class='pop' data-config='effect:slideDown;time:250;'>
									<span class='title'>三国杀[停不下来]</span>
									<span class='author'>主播:斗战猴子</span>
								</a>
							</li>
							<li class='bottom' style='background-image:url(image/banner/right/1/5.jpg)'>
								<a href='#' class='pop' data-config='effect:slideDown;time:250;'>
									<span class='title'>MiniLee周秀</span>
									<span class='author'>主播:哎呀呀</span>
								</a>
							</li>
							<li class='bottom' style='background-image:url(image/banner/right/1/6.jpg)'>
								<a href='#' class='pop' data-config='effect:slideDown;time:250;'>
									<span class='title'>Guige芸</span>
									<span class='author'>主播:bobo</span>
								</a>
							</li>
							<li class='bottom' style='background-image:url(image/banner/right/1/8.jpg)'>
								<a href='#' class='pop' data-config='effect:slideDown;time:250;'>
									<span class='title'>守望先锋</span>
									<span class='author'>主播:Magic</span>
								</a>
							</li>
						</ul>
					</li>
					<li>
						<ul class='list-wrap'>
							<li class='top' style='background-image:url(image/banner/right/2/1.jpg)'>
								<a href='#' class='pop' data-config='effect:slideDown;time:250;'>
									<span class='title'>[言和小说]Kill Me Eyes</span>
									<span class='author'>主播:塞亚</span>
								</a>
							</li>
							<li class='top' style='background-image:url(image/banner/right/2/2.jpg)'>
								<a href='#' class='pop' data-config='effect:slideDown;time:250;'>
									<span class='title'>心跳扑通扑通说喜欢</span>
									<span class='author'>主播:高压锅</span>
								</a>
							</li>
							<li class='top' style='background-image:url(image/banner/right/2/3.jpg)'>
								<a href='#' class='pop' data-config='effect:slideDown;time:250;'>
									<span class='title'>见过这样的男人?</span>
									<span class='author'>主播:萌一点嘛</span>
								</a>
							</li>
							<li class='top' style='background-image:url(image/banner/right/2/7.jpg)'>
								<a href='#' class='pop' data-config='effect:slideDown;time:250;'>
									<span class='title'>万国动向</span>
									<span class='author'>主播:萌萌牛</span>
								</a>
							</li>
							<li class='bottom' style='background-image:url(image/banner/right/2/4.jpg)'>
								<a href='#' class='pop' data-config='effect:slideDown;time:250;'>
									<span class='title'>三国杀[停不下来]</span>
									<span class='author'>主播:斗战猴子</span>
								</a>
							</li>
							<li class='bottom' style='background-image:url(image/banner/right/2/5.jpg)'>
								<a href='#' class='pop' data-config='effect:slideDown;time:250;'>
									<span class='title'>全新[魔法格]</span>
									<span class='author'>主播:哎呀呀</span>
								</a>
							</li>
							<li class='bottom' style='background-image:url(image/banner/right/2/6.jpg)'>
								<a href='#' class='pop' data-config='effect:slideDown;time:250;'>
									<span class='title'>吉他手的一天</span>
									<span class='author'>主播:bobo</span>
								</a>
							</li>
							<li class='bottom' style='background-image:url(image/banner/right/2/8.jpg)'>
								<a href='#' class='pop' data-config='effect:slideDown;time:250;'>
									<span class='title'>塑业先锋</span>
									<span class='author'>主播:Magic</span>
								</a>
							</li>
						</ul>
					</li>
					<li>
						<ul class='list-wrap'>
							<li class='top' style='background-image:url(image/banner/right/3/1.jpg)'>
								<a href='#' class='pop' data-config='effect:slideDown;time:250;'>
									<span class='title'>[言和小说]Kill Me Eyes</span>
									<span class='author'>主播:塞亚</span>
								</a>
							</li>
							<li class='top' style='background-image:url(image/banner/right/3/2.jpg)'>
								<a href='#' class='pop' data-config='effect:slideDown;time:250;'>
									<span class='title'>心跳扑通扑通说喜欢</span>
									<span class='author'>主播:高压锅</span>
								</a>
							</li>
							<li class='top' style='background-image:url(image/banner/right/3/3.jpg)'>
								<a href='#' class='pop' data-config='effect:slideDown;time:250;'>
									<span class='title'>见过这样的男人?</span>
									<span class='author'>主播:萌一点嘛</span>
								</a>
							</li>
							<li class='top' style='background-image:url(image/banner/right/3/7.jpg)'>
								<a href='#' class='pop' data-config='effect:slideDown;time:250;'>
									<span class='title'>万国动向</span>
									<span class='author'>主播:萌萌牛</span>
								</a>
							</li>
							<li class='bottom' style='background-image:url(image/banner/right/3/4.jpg)'>
								<a href='#' class='pop' data-config='effect:slideDown;time:250;'>
									<span class='title'>三国杀[停不下来]</span>
									<span class='author'>主播:斗战猴子</span>
								</a>
							</li>
							<li class='bottom' style='background-image:url(image/banner/right/3/5.jpg)'>
								<a href='#' class='pop' data-config='effect:slideDown;time:250;'>
									<span class='title'>全新[魔法格]</span>
									<span class='author'>主播:哎呀呀</span>
								</a>
							</li>
							<li class='bottom' style='background-image:url(image/banner/right/3/6.jpg)'>
								<a href='#' class='pop' data-config='effect:slideDown;time:250;'>
									<span class='title'>吉他手的一天</span>
									<span class='author'>主播:bobo</span>
								</a>
							</li>
							<li class='bottom' style='background-image:url(image/banner/right/3/8.jpg)'>
								<a href='#' class='pop' data-config='effect:slideDown;time:250;'>
									<span class='title'>塑业先锋</span>
									<span class='author'>主播:Magic</span>
								</a>
							</li>
						</ul>
					</li>
				</ul>
				<div class='btn prev'><span>昨日</span></div>
				<div class='btn next'><span>一周</span></div>
			</div>
		</div>
		<!--推广区-->
		<div class='bili-bd-promote clearfix'>
			<div class='promote-lt'>
				<div class='lt-header'>
					<h2 class='header-title'>
						推广
					</h2>
					<ul class='header-list'>
						<li><a href='#'>一大波角虫接近中(๑•̀ㅂ•́)و✧</a></li>
						<li><a href='#'>我的梦想是有一个女票</a></li>
						<li class='last'><a href='#'>可以！这很流星群 (｡•̀◡-)✧</a></li>
					</ul>
				</div>
				<div class='lt-container'>

					<ul class='container-list' ref="content">
						<li class='first' style="margin-left: 50px" v-for="v in recvideo" style="margin: 10px">
							<img class='list-pic' :src="v.image" @click="location.href = 'video.html?id=' + v.id">

							<div style=" display: flex; flex-direction: column">
								<p class="video-title">{{v.vname}}</p>
								<p style="color:#9499A0;font-size:12px;margin:8px 0">{{v.name}}&nbsp;&nbsp;&nbsp;&nbsp;   {{formatVideoTime(v.time)}}</p>
							</div>
						</li>

					</ul>
				</div>
			</div>
		</div>
	</div>
</div>
<script>
	var v = new Vue({
		el : "#app",
		data : {
			myinfo:{},
			scrollTop:0,
			recvideo: [], // 相关视频
			searchText: "", //搜索词
			page: 1,
			counts: 12,
			isAtBottom: false, // 标记是否滚动到了底部
			board: {},
		},
		created() {
			// 判断是否是分类状态
			let bid = location.search.split("=")[1];
			console.log(bid)
			if(!bid){
				this.recVideo();
			}

			this.getBoard();
			this.getVideoByBid()

		},
		methods : {
			TODO(){
				this.$message({type: 'info', message: '功能开发中'});
			},
			recVideo(){
				axios.get("video/recVideo", {
					params:{
						page: this.page,
						count: this.counts
					}
				}).then(res=>this.recvideo = res.data)
			},
			getBoard(){
				axios.get("board/getBoard").then(res=>{
					this.board = res.data
				})
			},
			getVideoByBid(){
				// if(!location.search){
				// 	return
				// }
				let bid = location.search.split("=")[1];
				// if(!bid){
				// 	return
				// }
				if(bid){
					axios.get("video/getVideoByBid"+location.search).then(res=>{
						this.recvideo = res.data;
					})
				}
			},
			a(myinfo){
				console.log("myinfo"+myinfo)
				this.myinfo = myinfo;
			},
			searchByText(){
				location.href = 'search.html?searchText=' + this.searchText;
			},
			checkScrollPosition() {
				// 检查是否滚动到了窗口底部
				const bottomOfWindow =
						Math.ceil(window.innerHeight + window.scrollY) >=
						document.documentElement.scrollHeight;

				if (bottomOfWindow) {
					this.isAtBottom = true;
					// 在这里调用其他Vue方法或执行其他逻辑
					this.page += 1
					axios.get("video/recVideo", {
						params:{
							page: this.page,
							count: this.counts
						}
					}).then(res=> {
						const objectArray = Object.values(res.data);
						// 合并 分页的数据
						const mergedArray = [...this.recvideo, ...objectArray]
						this.recvideo = mergedArray;
					})

					// this.handleScrollToBottom();
				} else {
					this.isAtBottom = false;
				}
			},
			/**
			 * 格式化视频发布时间
			 * @param {string} isoTime - ISO 8601 格式的时间字符串 (如: "2025-05-05T08:03:25.000+00:00")
			 * @returns {string} 格式化后的时间字符串
			 */
			formatVideoTime(isoTime) {
				// 1. 解析输入时间
				const pubDate = new Date(isoTime);
				const now = new Date();

				// 2. 计算时间差（毫秒）
				const diffMs = now - pubDate;
				const diffMins = Math.floor(diffMs / (1000 * 60));
				const diffHours = Math.floor(diffMs / (1000 * 60 * 60));

				// 3. 判断并返回不同格式
				if (diffMins < 60) {
					return `${diffMins}分钟前`;
				}

				// 检查是否是今天
				const isToday = pubDate.getDate() === now.getDate() &&
						pubDate.getMonth() === now.getMonth() &&
						pubDate.getFullYear() === now.getFullYear();

				if (isToday && diffHours < 24) {
					return `${diffHours}小时前`;
				}

				// 不是今天则返回具体日期
				const year = pubDate.getFullYear();
				const month = String(pubDate.getMonth() + 1).padStart(2, '0');
				const day = String(pubDate.getDate()).padStart(2, '0');

				return `${year}-${month}-${day}`;
			},

		},
		mounted() {
			let bid = location.search.split("=")[1];
			if(!bid){
				window.addEventListener('scroll', this.checkScrollPosition);
			}

		// 	// 组件挂载后添加滚动事件监听器
		// 	window.addEventListener('scroll', this.handleScroll);
		// },
		// beforeDestroy() {
		// 	// 组件销毁前移除滚动事件监听器
		// 	window.removeEventListener('scroll', this.handleScroll);
		}
	})
</script>

<script>
//   var a = 0;
// $(window).on('scroll',function(){
//   var b = $(this).scrollTop(),
//     c = b - a;
//     console.log(c);
//     a = b;
// });
  document.addEventListener("DOMContentLoaded", function () {
	  const bannerContainer = document.querySelector(".banner-container");
	  const bannerItems = document.querySelectorAll(".banner-container li");
	  const tabItems = document.querySelectorAll(".banner-tab li");
	  const totalSlides = bannerItems.length;

	  let currentIndex = 0; // 当前显示的图片索引
	  let autoPlayInterval; // 自动播放的定时器

	  // 初始化样式
	  bannerContainer.style.transition = "transform 0.6s cubic-bezier(0.42, 0, 0.58, 1)"; // 优化动画效果
	  bannerContainer.style.display = "flex"; // 确保子元素横向排列
	  bannerContainer.style.width = `${totalSlides * 100}%`; // 容器宽度
	  bannerItems.forEach((item) => {
		  item.style.flex = "0 0 100%"; // 每个图片占满容器宽度
	  });

	  // 切换到指定索引的图片
	  function goToSlide(index) {
		  currentIndex = (index + totalSlides) % totalSlides; // 确保索引不越界
		  bannerContainer.style.transform = `translate3d(-${currentIndex * 100}%, 0, 0)`; // 使用 translate3d 触发硬件加速
		  updateTabs(); // 更新下方指示器的状态
	  }

	  // 更新下方指示器的状态
	  function updateTabs() {
		  tabItems.forEach((tab, idx) => {
			  tab.classList.toggle("active", idx === currentIndex); // 当前索引对应的 tab 添加 active 类
		  });
	  }

	  // 自动播放功能
	  function startAutoPlay() {
		  autoPlayInterval = setInterval(() => {
			  goToSlide(currentIndex + 1); // 每隔 2 秒切换到下一张
		  }, 2000);
	  }

	  // 停止自动播放功能
	  function stopAutoPlay() {
		  clearInterval(autoPlayInterval);
	  }

	  // 给每个 tab 添加点击事件
	  tabItems.forEach((tab, index) => {
		  tab.addEventListener("click", () => {
			  stopAutoPlay(); // 点击时停止自动播放
			  goToSlide(index); // 切换到对应图片
			  startAutoPlay(); // 重新启动自动播放
		  });
	  });

	  // 启动自动播放
	  startAutoPlay();
  });
  </script>
</body>
</html>
